<template>
  <!-- 农机 -->
  <div class="farmsStock">
    <div class="routeName">{{ $route.name }}</div>
    <!-- 搜索框 -->
    <div class="searchBox">
      <div>
        <el-select  @change="getSearch()" v-model="params.type" class="select"  clearable placeholder="请选择农资类型">
          <el-option
            v-for="item in NZZLlist"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="params.remainingQuantity"
          class="select"
          @change="getSearch()"
          placeholder="请选择库存状态"
           clearable
        >
          <el-option
            v-for="item in remainingQuantity"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!-- <el-button type="primary" @click="params.current = 1, getFarmsStockPage(params)"
          >查 询</el-button
        > -->
      </div>
      <div>
        <el-input
          class="searchInp"
          @input="getSearch()"
          v-model="params.name"
          suffix-icon="el-icon-search"
          placeholder="搜索农资名称"
        ></el-input>
        <el-button class="greenBtn" type="primary" icon="el-icon-plus" style="margin-right:0.5vw;" @click="addFarmsStock()">农资入库</el-button>
        <el-button class="greenBtn" type="primary" icon="el-icon-tickets" @click="goStatistics(1)">出入库记录</el-button>
        <!-- <el-dropdown @command="handleCommand">
          <el-button>
           统计记录
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">入库记录</el-dropdown-item>
            <el-dropdown-item command="2">出库记录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
    </div>
    <!-- list -->
    <div class="listHeight">
      <div class="listcontent">
        <div class="listBox" v-for="item in farmsStockList" :key="item.id">
          <!-- <div class="listImg"><img src="../../assets/images/icon (1).png" alt="" /></div> -->
          <div class="listTit">
            <div class="name">
              {{ item.name }}
              <div class="Type">{{ item.typeFormat }}</div>
            </div>
            <div class="company">规格：{{ item.specifications }}</div>
            <div class="company">
              <span>{{ item.manufacturer }}</span>
              <span>库存量：{{ item.remainingQuantity }}公斤</span>
            </div>
          </div>
          <!-- <div class="listType">
            <div class="specification">{{ item.specifications }}</div>
          </div>
          <div class="listNum">{{ item.remainingQuantity }}千克</div> -->
          <div class="listOperation">
            <el-button
              size="small"
              type="primary"
              @click="edit(item)"
              >入 库</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleSizeChange"
        :current-page.sync="params.current"
        :page-size="params.pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加按钮弹窗 -->
    <el-dialog
      :title="addForm.name + '入库'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="dialogBeforeClose"
      class="dialog"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="入库数量" prop="num">
          <el-input v-model="addForm.num" type="number" :min="1"> </el-input>
        </el-form-item>
        <!-- 入库类型字典 -->
        <el-form-item label="入库类型" prop="receiptType">
          <el-radio-group v-model="addForm.receiptType">
            <el-radio
              v-for="item in RKLXlist"
              :key="item.id"
              :label="item.code"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="入库时间" prop="purchaseTime">
          <el-date-picker
            v-model="addForm.purchaseTime"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入库人" prop="purchaser">
          <el-select v-model="addForm.purchaser"  placeholder="请选择入库人">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getFarmsStockPageApi, AddFarmStockApi } from '@/api/farmStock'
import { getSysSonDictListApi, getUserListApi } from '@/api/dict'
export default {
  name: 'MeilinPCIndex',

  data () {
    return {
      input: '',
      NZZLlist: [], // 农资种类
      RKLXlist: [], // 入库类型
      params: {
        current: 1,
        pageSize: 12,
        type: '',
        name: '',
        remainingQuantity: ''
      },
      remainingQuantity: [
        { name: '有库存', id: 1 },
        { name: '无库存', id: 0 }
      ],
      farmsStockList: [],
      total: 1,
      currentPage: 1,
      dialogVisible: false,
      addForm: {}, // 入库
      baseId: 1,
      userList: [],
      rules: {
        num: [{ required: true, message: '请选择农资', trigger: 'blur' }],
        receiptType: [
          { required: true, message: '请选入库类型', trigger: 'blur' }
        ],
        purchaseTime: [
          { required: true, message: '请选择入库时间', trigger: 'blur' }
        ],
        purchaser: [
          { required: true, message: '请选择入库人', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {
    this.baseId = this.$store.getters.userInfo.baseId
    this.getSysSonDictList()
    this.getFarmsStockPage(this.params)
  },

  methods: {
    // 搜索
    getSearch () {
      clearTimeout(this.setTime)
      this.setTime = setTimeout(() => {
        this.params.current = 1
        this.getFarmsStockPage(this.params)
      }, 300)
    },
    // 农资字典
    async getSysSonDictList () {
      // 农资种类
      const res = await getSysSonDictListApi('NZZL')
      this.NZZLlist = res.data
      // 入库种类
      const res1 = await getSysSonDictListApi('RKLX')
      this.RKLXlist = res1.data.reverse()
      // 用户列表
      const user = await getUserListApi(this.baseId)
      this.userList = user.data
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // this.addForm.num = +this.addForm.num
          this.addForm.baseId = this.baseId
          await AddFarmStockApi(this.addForm)
          this.$message.success('提交成功')
          this.dialogBeforeClose()
          // this.$router.push({
          //   path: '/shuzhongtian/farmsStock'
          // }) // 返回详情
        } else {
          this.$message.error('请正确填写')
          return false
        }
      })
    },
    // 农资列表
    async getFarmsStockPage (params) {
      params.baseId = this.baseId
      const res = await getFarmsStockPageApi(params)
      this.farmsStockList = res.data.records
      this.total = res.data.total
    },
    // 分页
    handleSizeChange (val) {
      this.params.current = val
      this.getFarmsStockPage(this.params)
    },

    // 表单上入库按钮
    edit (data) {
      // this.addForm.agriDicId = data.agriDicId
      // this.addForm.baseId = this.baseId
      // this.addForm.name = data.name
      // this.addForm.specifications = data.specifications
      // this.addForm.agriDicId = data.agriDicId
      // this.addForm.type = data.type
      // console.log(data)
      // this.dialogVisible = true
      sessionStorage.setItem('farmsStockAdd', JSON.stringify(data))
      this.$router.push({
        path: '/shuzhongtian/farmsStockAdd'
      })
    },
    dialogBeforeClose () {
      this.dialogVisible = false
      this.$nextTick(() => {
        this.addForm = {}
      })
    },
    // 农资入库页
    addFarmsStock () {
      this.$router.push({
        path: '/shuzhongtian/farmsStockAdd'
      })
    },
    // 统计记录菜单
    handleCommand (command) {
      this.goStatistics(command)
    },
    // 农资统计页
    goStatistics (id) {
      this.$router.push({
        path: `/shuzhongtian/farmsStockStatistics/${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.farmsStock {
  width: 100%;
  height: 100%;
  position: relative;
  .searchBox {
    height: 11vh;
    line-height: 11vh;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    .searchBox-l {
      height: 3.125vw * 0.834;
      //解决下拉框偏移
      ::v-deep .el-select > .el-input {
        height: 3.5vw;
      }
    }
    .select {
      margin-right: 1.0417vw;
      width: 250px;
      height: 3.125vw * 0.834;
      border-radius: 12px 12px 12px 12px;
    }
    .searchInp {
      width: 250px;
      height: 3.125vw * 0.834;
      margin-right: 1vw;
      ::v-deep .el-input__inner {
        background: rgba(196, 196, 196, 0.15);
        border: none
      }
    }
  }
/** @media screen and (max-width: 1450px) {
    .searchBox {
    width: 78.2083vw;
    height: 6.25vw * 0.834;
    line-height: 6.25vw * 0.834;
    background: #ffffff;
    border-radius: 15px 15px 15px 15px;
    margin-left: 1vw;
    display: flex;
    justify-content: space-between;
    padding: 0 1.0417vw;
    .searchBox-l {
      height: 3.125vw * 0.834;
      //解决下拉框偏移
      ::v-deep .el-select > .el-input {
        height: 3.5vw;
      }
    }
    .select {
      margin-right: 1.0417vw;
      width: 16.7708vw;
      height: 3.125vw * 0.834;
      border-radius: 12px 12px 12px 12px;
    }
    .searchInp {
      width: 16.7708vw;
      height: 3.125vw * 0.834;
      margin-right: 1vw;
    }
  }
} **/
  .listcontent {
    margin-top: 1vw;
    display: flex;
    flex-wrap: wrap;
    .listBox {
      &:nth-child(3n) {
        margin-right: 0;
      }
      width: 32.4%;
      background: #FAFAFA;
      border: 1px solid #FAFAFA;
      position: relative;
      // background-color: #fff;
      // box-shadow: 0px 4px 43px 3px rgba(0, 0, 0, 0.08);
      padding: 25px;
      border-radius: 4px;
      // display: flex;
      // justify-content: space-between;
      margin-bottom: 1vh;
      margin-right: 1%;
      // text-align: left;
      align-items: center;
      .name {
        display: flex;
        align-items: center;
        font-weight: bold;
      }
      .company {
        color: #999;
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        > span:last-child {
          color: #333;
        }
      }
      .Type {
        background: #e8f7ef;
        border-radius: 2px;
        font-weight: 400;
        font-size: 12px;
        color: #00C586;
        border: 1px solid #00C586;
        margin-left: 5px;
        padding: 1px 4px 2px 4px;
      }
      .listImg {
        width: 6.25vw * 0.834;
        height: 6.25vw * 0.834;
        background-color: #ccc;
        margin-right:1.0417vw;
        flex-shrink: 0;
        text-align: center;
        line-height:6.25vw * 0.834;
        img {
        width: 6.25vw * 0.834;
        height: 6.25vw * 0.834;
        }
      }
      .listTit {
        font-size: 20px;
      }
      .listType {
        min-width: 12.5vw;
        height: 1.5625vw * 0.834;
        padding: 1vh 0;
        margin-right: 25.4167vw;
        line-height: 4vh;
        text-align: center;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        .specification {
          min-width: 7.2917vw;
          height: 1.5625vw * 0.834;
          line-height: 1.5625vw * 0.834;
          background: #edf1f4;
          border-radius: 15px 15px 15px 15px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #666666;
          font-style: normal;
          text-transform: none;
        }
      }
      .listNum {
        min-width: 8.3333vw;
        height: 2.0833vw * 0.834;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 1.4583vw;
        color: #19b560;
        margin: auto 5.6771vw auto 0;
      }
      .listOperation {
        position: absolute;
        right: 25px;
        top: 20px;
        .el-button {
          background: #fff;
          color: #00C586;
          border-radius: 2px;
          border: 1px solid #00C586;
        }
      }
      &:hover {
        border: 1px solid #00C586;
        .listOperation {
          .el-button {
            background: #00C586;
            color: #fff;
            border-radius: 2px;
            border: 1px solid #00C586;
          }
        }
      }
    }
  }
  .pagination {
    text-align: right;
  }
}
.dialog {
  ::v-deep .el-input__inner {
    width: 3.5rem !important;
  }
}
//解决下拉框偏移
::v-deep .el-dropdown  {
      height: 3.5vw;
}
.listHeight {
  height: 67vh
}
</style>
